
<h3 mat-dialog-title class="mb-1">SMTP settings</h3>

<p class="text-muted mb-4">Change your email SMTP settings</p>

<form [formGroup]="smtpForm">

  <div mat-dialog-content>

    <div class="row">

      <div class="col-sm-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="SMTP host name"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>http</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="SMTP host name"
            formControlName="host"
            spellcheck="false"
            autocomplete="off"
            name="host" />
        </mat-form-field>

      </div>

      <div class="col-sm-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="SMTP port"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>settings_input_component</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="number"
            placeholder="SMTP port"
            autocomplete="off"
            formControlName="port"
            name="port" />
        </mat-form-field>

      </div>

      <div class="col-sm-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Username"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>contact_mail</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="username"
            autocomplete="off"
            spellcheck="false"
            formControlName="username"
            name="username" />
        </mat-form-field>

      </div>

      <div class="col-sm-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Password"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>password</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="Password"
            autocomplete="off"
            spellcheck="false"
            formControlName="password"
            name="password" />
        </mat-form-field>

      </div>

      <div class="col-sm-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Default from name"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>person</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            spellcheck="false"
            placeholder="Default from name"
            autocomplete="off"
            formControlName="name"
            name="name" />
        </mat-form-field>

      </div>

      <div class="col-sm-6 col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Default from email"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>email</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="Default from email"
            spellcheck="false"
            formControlName="address"
            name="address"
            [pattern]="CommonRegEx.email" />
          <mat-error>{{CommonErrorMessages.email}}</mat-error>
        </mat-form-field>

      </div>

      <div class="col-12 d-flex justify-content-end">

        <mat-checkbox
          formControlName="secure"
          name="secure"
          class="mb-2"
          color="primary">
          Secure
        </mat-checkbox>

      </div>

    </div>
  </div>

  <div mat-dialog-actions [align]="'end'">

    <button
      mat-button
      mat-dialog-close
      type="button"
      color="primary">
      Cancel
    </button>

    <button
      mat-flat-button
      type="submit"
      color="primary"
      (click)="submit()"
      class="px-3">
      Save
    </button>

  </div>

</form>
